<template>
	<view class="shoping">
		<view class="searchBox"  @click="toSearch()">
			<van-search
			  :value=searchValue
			  shape="round"
			  background="#fff"
			  placeholder="请输入搜索关键词"
			  disabled
			/>
		</view>
		<view class="goodsList">
			<view class="left">
				<view @click="choose(item.id)" :class="activeIndex==item.id? 'act':'selectName'" v-for="(item,index) in sortList" :key="index">
					<text>{{item.styleName}}</text>
				</view>
			</view>
			<view class="sortBox">
				<view class="cont">
					<text :class="[orderBy==''?'active':'']" @click="sort()">综合</text>
				</view>
				<view class="cont">
					<text 
					v-if="orderBy=='saleNum' && sortBy=='asc'" 
					:class="[orderBy=='saleNum' && sortBy=='asc'?'active':'']" 
					@click="sort('saleNum','desc')"
					>热度 ▲</text>							
					<text 
					v-else-if="orderBy=='saleNum'&& sortBy=='desc'" 
					:class="[orderBy=='saleNum'&& sortBy=='desc'?'active':'']" 
					@click="sort('saleNum','asc')"
					>热度 ▼</text>
					<text v-else @click="sort('saleNum','asc')">热度</text>
				</view>
				<view class="cont">
					<text 
					v-if="orderBy=='retailPrice' && sortBy=='asc'" 
					:class="[orderBy=='retailPrice' && sortBy=='asc'?'active':'']" 
					@click="sort('retailPrice','desc')"
					>价格 ▲</text>
					<text 
					v-else-if="orderBy=='retailPrice'&& sortBy=='desc'"  
					:class="[orderBy=='retailPrice'&& sortBy=='desc'?'active':'']" 
					@click="sort('retailPrice','asc')"
					>价格 ▼</text>
					<text v-else @click="sort('retailPrice','asc')">价格</text>
				</view>
			</view>
			<scroll-view
				scroll-y="true"
				@scrolltolower="getGoodsList"
				style="height: 99%;width: calc( 100% - 170rpx);"
			> 	
				<view class="right">
					<view class="boxList">
						<view class="box" v-for="(item,index) in imgList" :key="item" @click="to(item)">
							<image  :src="item.mainImageUrl+'?imageView2/2/w/280/h/280/q/90'" mode="aspectFill"></image>
							<view class="intro">
								<text class="name">{{item.name}}</text>
								<text class="price">￥{{item.factoryPrice}}</text>
							</view>
						</view>
					</view>
				</view> 
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
		data() {
			return {
				title: '未来屋图文介绍',
				banner:[],
				sortList:[],
				imgList:[],
				collectList:[],
				videoList:[],
				activeIndex:0,
				searchValue:'',
				merchantsData:{
					address: "",
					banner: "",
					companyProfile: "",
					createBy: "",
					createTime: "",
					delFlag: "0",
					id: '',
					isPlatform: 0,
					phone: "",
					remark: "",
					searchValue: "",
					updateBy: "",
					updateTime: "",
					videoList: [],
					videoUrl: "",
					wechat: "",
				},
				pageNum: 1,//当前页码
				show:false,
				aList:[
					{text:'销量',value:''},
					{text:'销量 ↑',value:'asc'},
					{text:'销量 ↓',value:'desc'},
				],
				bList:[
					{text:'价格',value:''},
					{text:'价格 ↑',value:'asc'},
					{text:'价格 ↓',value:'desc'},
				],
				orderBy:'',
				sortBy:''
			}
		},
		onLoad(query) {
			this.getStyle(query.id);
			// this.getVideoList();
			// this.getByPhone();
		},
		methods: {
			sort(val="",type=""){
				this.orderBy=val;
				this.sortBy=type;
				if(val!=''){
					console.log(val,type)
					this.imgList=[];
					this.pageNum=1;
					this.getGoodsList();
				}else{
					this.imgList=[];
					this.pageNum=1;
					this.getGoodsList();
				}
			},
			toSearch(){
				uni.navigateTo({
					url: '/pages/list/index'
				});
			},
			//------------------
			showPopups(url) {
				wx.previewMedia({
					sources:[{
						url:url,
						type: 'image'
					}]
				})
			},
			to(item){
				uni.navigateTo({
					url: '/pages/detail/index?id='+item.id
				});
			},
			choose(id){
				if(this.activeIndex!=id){
					this.activeIndex=id;
						this.imgList=[];
						this.pageNum=1;
						this.getGoodsList();	
				}
				
			},
			getStyle(id){
				const requestParam = {
					url: "/app/mall/styleList",
					method: "GET",
					data:{
						pageNum: 1,
						parentId:id,
						pageSize:50,
						styleLevel:1,
					},
					callBack: (res) => {
						console.log(res,'分类列表');
						this.sortList=res.rows;
						if(res.rows!=[]){
							this.activeIndex=res.rows[0].id;
							this.getGoodsList();
						}
					}
				}
				this.$request(requestParam);
			},
			getGoodsList(){
				let data={}
				if(this.orderBy && this.sortBy){
					data={
						styleId :this.activeIndex,
						pageNum: this.pageNum,
						pageSize: 10,
						orderBy:this.orderBy,
						sortBy:this.sortBy
					}
				}else{
					data={
						styleId :this.activeIndex,
						pageNum: this.pageNum,
						pageSize: 10,
					}
				}
				const requestParam = {
					url: "/app/mall/commodityList",
					method: "GET",
					data:data,
					callBack: (res) => {
						if((res.total/10+1)>this.pageNum){
							this.imgList.push(...res.rows);
							this.pageNum++;
						}
					}
				}
				this.$request(requestParam);
			},
			
			// getByPhone(){
			// 	const requestParam = {
			// 		url: "/app/mall/getByPhone",
			// 		method: "GET",
			// 		data:{
			// 			phone: '11111111111'
			// 		},
			// 		callBack: (res) => {
			// 			console.log(res);
			// 			this.merchantsData=res.data;
			// 		}
			// 	}
			// 	this.$request(requestParam);
			// },
		},
}		
</script>

<style lang="scss">
@import './style.scss';
</style>
